{extend name="base" /}
{block name="body"}
<style>
    .ui-imgtips span{ line-height:170%; margin-top:10px; display:block; width:202px;}
</style>
<div class="layui-body">
    <!--tab标签-->

    <div class="layui-tab">
        <ul class="layui-tab-title">
            <li class="layui-this">普通图片上传</li>
            <li>多图片上传</li>
            <li>图片裁剪</li>
        </ul>
        <div class="layui-tab-content">

            <div class="layui-tab-item layui-show">
                <div class="layui-tab-item layui-show">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test1">上传图片</button>
                        <div class="layui-upload-list">
                            <img class="layui-upload-img" width="200" id="demo1">
                            <p id="demoText"></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-tab-item">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test2">多图片上传</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="demo2"></div>
                    </blockquote>
                </div>
            </div>

            <div class="layui-tab-item">
                <div class="ui-imgshow">
                    <img src="__IMG__/default_thumb.png" width="113" height="113">
                </div>
                <button type="button" class="layui-btn layui-btn-danger" id="test3"><i class="layui-icon"></i>选择图片</button>
                <input type="hidden" name="sharepic" id="showpic" value="">

                <!--裁剪-->
                <div class="crop-mask"></div>
                <div class="crop-container">
                    <div class="imgcrop-main">
                        <div class="modal-header">
                            <span aria-hidden="true">&times;</span>
                            <h4 class="modal-title" style="font-size:14px; line-height:45px;">裁剪图片 <font class="error"></font></h4>
                        </div>
                        <div class="img-container">
                            <img src="" class="thumb_img">
                            <div class="cropper-result">裁剪数据：左：<span class="c-l"></span>px，上：<span class="c-t"></span>px，宽度：<span class="c-w"></span>px，高度：<span class="c-h"></span>px &nbsp;&nbsp;</div>
                        </div>
                        <div class="modal-footer" style="text-align:right; background-color:#f1f1f1; border-top:solid 1px #dcdcdc; height:50px; overflow:hidden;">
                            <button class="layui-btn btn-cropper" style="margin-top:5px;">确定</button>
                            <button type="reset" class="layui-btn layui-btn-primary btn-close-cropper" style="margin-top:5px; margin-right:10px;">取消</button>
                        </div>
                    </div>
                </div>
                <input id="size-w" type="hidden" value="300">
                <input id="size-h" type="hidden" value="300">
                <input id="img-x" type="hidden" value="0" placeholder="x">
                <input id="img-y" type="hidden" value="0" placeholder="y">
                <input id="img-h" type="hidden" value="0" placeholder="w">
                <input id="img-w" type="hidden" value="0" placeholder="h">
                <input id="img-r" type="hidden" value="0" placeholder="r">

            </div>
        </div>
    </div>
</div>





{/block}
{block name="script"}
<link href="__CSS__/cropper.css" rel="stylesheet">
<script src="__JS__/jquery.form.js"></script>
<script src="__JS__/cropper.min.js"></script>
<script src="__JS__/layui/layui.js"></script>
<script>
    layui.use('upload', function(){
        var $ = layui.jquery
            ,upload = layui.upload;

        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/index.php/api/upload/upload'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.error > 0){
                    return layer.msg('上传失败');
                }
                //上传成功
                $('#demoText').html('<span style="color: #50c4ff;">上传成功！'+res.url+'</span>');
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: '/index.php/api/upload/upload'
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<img width="100" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                });
            }
            ,done: function(res){
                //上传完毕处理...
            }
        });


        //裁剪上传
        upload.render({
            elem: '#test3'
            ,url: '/index.php/api/upload/upload'
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                // obj.preview(function(index, file, result){
                //     $('#demo2').append('<img width="100" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
                // });
            }
            ,done: function(res){
                //上传完毕
                if (res.error!='') {
                    layer.msg(data.error,{icon: 5});
                } else {
                    $("#showpic").val(res.url);
                    $(".thumb_img").attr('src',res.url);
                    croppic();
                }
            }
        });
    });

    //裁剪
    function croppic(){
        var size_w = parseInt($("#size-w").val());
        var size_h = parseInt($("#size-h").val());
        var aspectRatio = (size_w > 0 && size_h > 0) ?  size_w/size_h : null;
        $(".img-container img").cropper('destroy');
        var cropoption = { minContainerWidth: 320,minContainerHeight: 180,zoomin: null,zoomout: null,movable:true,aspectRatio: aspectRatio,
            crop: function (data) {
                $('#img-x').val(Math.round(data.x));
                $('#img-y').val(Math.round(data.y));
                $('#img-h').val(Math.round(data.height));
                $('#img-w').val(Math.round(data.width));
                $('#img-r').val(Math.round(data.rotate));
                $(".c-w").text(Math.round(data.width));
                $(".c-h").text(Math.round(data.height));
                $(".c-l").text(Math.round(data.x));
                $(".c-t").text(Math.round(data.y));
            }
        };
        $(".img-container img").on({
            'build.cropper': function (e) {},
            'built.cropper': function (e) {},
            'dragstart.cropper': function (e) {},
            'dragmove.cropper': function (e) {},
            'dragend.cropper': function (e) {},
            'zoomin.cropper': function (e) {},
            'zoomout.cropper': function (e) {}
        }).cropper(cropoption);
        $(".crop-container,.crop-mask").fadeIn(500);
    }
    //关闭窗口
    $("body").on("click",".btn-close-cropper,.crop-mask,.modal-header span",function(data){
        $(".crop-container,.crop-mask").fadeOut(500);
    });
    //确认裁剪
    $("body").on("click",".btn-cropper",function(){
        var $this= $(this);
        var path = $("#showpic").val();
        var x    = $("#img-x").val();
        var y    = $("#img-y").val();
        var w    = $("#img-w").val();
        var h    = $("#img-h").val();
        var r    = $("#img-r").val();
        if ( path == '' ) {
            layer.msg('裁剪路径为空，请上传一张裁剪的图片吧',{icon: 5}); return false;
        }
        if ( w == 0 || h == 0 ) {
            layer.msg('裁剪宽度和高度不能为0',{icon: 5}); return false;
        }
        //layer.msg('裁剪宽度和高度不能为0',{icon: 5,zIndex:10000}); return false;
        var ii = layer.load();
        $.post('{:url("api/upload/croppic")}',{'path':path,'x':x,'y':y,'w':w,'h':h,'r':r},function(data){
            layer.close(ii);
            if ( data.state == 1 ) {
                $(".crop-container,.crop-mask").fadeOut(500);
                $("#showpic").val(data.file);
                $(".ui-imgshow").html('<img src="'+data.file+'" width="113" height="113">');
            } else {
                layer.msg(data.msg,{icon: 5}); return false;
            }
        },'json');
    });

</script>
{/block}